<template> 
    <div>
        <el-container>
            <el-main>
                    <el-header>
                        <el-form :inline="true" :model="queryForm" class="demo-form-inline">
                            <el-form-item label="菜名">
                                <el-input v-model="queryForm.dishName " placeholder="请输入菜品名称"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="getDish(null)">查询</el-button>
                                <el-button type="success"   circle icon="el-icon-plus" @click="addDialogVisible=true"></el-button>
                            </el-form-item>
                        </el-form>
                    </el-header>
                   
                    <el-main>
                        <el-table :data="questions" style="width: 100%">
                            <el-table-column
                                prop="id"
                                label="id">
                            </el-table-column>
                            <el-table-column
                                prop="dishTypeName"
                                label="菜品类型" >
                            </el-table-column>
                            <el-table-column
                            prop="dishName"
                            label="菜品名">
                            </el-table-column>
                            <el-table-column
                            prop="status"
                            label="状态">
                            </el-table-column>
                            <el-table-column
                            prop="dishPrice"
                            label="价格">
                            </el-table-column>
                            <el-table-column
                            prop="unit"
                            label="单位">
                            </el-table-column>
                            <el-table-column
                            prop="dishDescribe"
                            label="菜品描述">
                            </el-table-column>
                            <el-table-column
                            prop="quantity"
                            label="已售数量">
                            </el-table-column>
                            <el-table-column
                            prop="stock"
                            label="库存">
                            </el-table-column>
                            <el-table-column
                                fixed="right"
                                label="操作"
                                width="100">
                                <template slot-scope="scope">
                                    <el-button @click="handleClick(scope.row)"  type="text" size="small">修改信息</el-button>
                                    <el-button @click="delques(scope.row)"  type="text" size="small">删除信息</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-main>
                    <el-footer>
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="page.current"
                            :page-size="page.size"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="page.total">
                        </el-pagination>
                    </el-footer>
            </el-main>
        </el-container>

        <el-dialog
        title="添加菜品"
        :visible.sync="addDialogVisible"
        width="35%"
        >
            <el-form :model="addDishForm" class="demo-form-inline">
                <el-form-item label="添加菜品名">
                    <el-input  v-model="addDishForm.dishName" placeholder="请输入添加菜品名"></el-input>
                </el-form-item>

                <el-form-item label="添加菜品的类型">
                    <el-select v-model="addDishForm.dishTypeId" placeholder="请输入添加菜品的类型" >
                    <el-option :label=d.dishTypeName :value=d.id  v-for="(d , index) in dishType" :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="价格">
                    <el-input v-model="addDishForm.dishPrice" placeholder="请输入菜品价格"></el-input>
                </el-form-item>
                <el-form-item label="单位">
                    <el-input v-model="addDishForm.unit" placeholder="请输入菜品单位"></el-input>
                </el-form-item>
                <el-form-item label="菜品图片">
                    <el-input v-model="addDishForm.dishImg" placeholder="菜品图片"></el-input>
                </el-form-item>
                <el-form-item label="菜品描述">
                    <el-input v-model="addDishForm.dishDescribe" placeholder="请输入菜品描述"></el-input>
                </el-form-item>
                <el-form-item label="菜品库存">
                    <el-input v-model="addDishForm.stock" placeholder="请输入菜品库存"></el-input>
                </el-form-item>
                <br>
                <el-form-item>
                    <el-button @click="addDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="handleAdd">确 定</el-button>    
                </el-form-item>
            </el-form>
        </el-dialog>

        
        <!-- <el-dialog
            title="删除菜品"
            :visible.sync="delDialogVisible"
            width="30%"
            >
            <el-form :model="delForm" class="demo-form-inline">
                <el-form-item label="菜品id">
                    <el-input v-model="delForm.id" placeholder="请输入菜品id"></el-input>
                </el-form-item>    
                <el-form-item>
                    <el-button @click="delDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="delques">确 定</el-button>    
                </el-form-item>
            </el-form> 
        </el-dialog> -->
        

        
        <el-dialog
            title="修改菜品信息"
            :visible.sync="detailDialogVisible"
            width="30%"
            >
            <el-form :model="modifyForm" class="demo-form-inline">
                <el-form-item label="菜品id">
                    <el-input v-model="modifyForm.id" disabled="true" placeholder="请输入菜品id"></el-input>
                </el-form-item>
                
                <el-form-item label="菜品类型">
                    <el-select v-model="modifyForm.dishTypeId" placeholder="菜类">
                        <el-option :label=d.dishTypeName :value=d.id  v-for="(d , index) in dishType" :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜品名">
                    <el-input v-model="modifyForm.dishName" placeholder="请输入菜品名"></el-input>
                </el-form-item>
                <el-form-item label="菜品状态">
                    <el-select v-model="modifyForm.status" placeholder="菜品状态">
                        <el-option label="下架" value="TAKE_DOWN"></el-option>
                        <el-option label="上架" value="USE"></el-option>
                        <el-option label="售罄" value="SOLD_OUT"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="价格">
                    <el-input v-model="modifyForm.dishPrice" placeholder="请输入价格"></el-input>
                </el-form-item>
                <el-form-item label="单位">
                    <el-input v-model="modifyForm.unit" placeholder="请输入单位"></el-input>
                </el-form-item>
                <el-form-item label="菜品图片">
                    <el-input v-model="modifyForm.dishImg" placeholder="请输入菜品图片"></el-input>
                </el-form-item>
                <el-form-item label="菜品描述">
                    <el-input v-model="modifyForm.dishDescribe" placeholder="请输入菜品描述"></el-input>
                </el-form-item>
                <el-form-item label="已售数量">
                    <el-input v-model="modifyForm.quantity" placeholder="请输入已售数量"></el-input>
                </el-form-item>
                <el-form-item label="库存">
                    <el-input v-model="modifyForm.stock" placeholder="请输入库存"></el-input>
                </el-form-item>
                <!-- <el-form-item label="关联门店id">
                    <el-input v-model="modifyForm.storeId" placeholder="请输入关联门店id"></el-input>
                </el-form-item> -->
                <el-form-item>
                    <el-button @click="detailDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="handleModify">确 定</el-button>    
                </el-form-item>
            </el-form>        
        </el-dialog>
    </div>
</template>
<script>
import axios from "axios";

        export default({
            data() {
                return {
                    queryForm: {
                        dishName:"",                      
                    },
                    questions:[],
                    
                    addDialogVisible: false,
                    detailDialogVisible:false,
                    delDialogVisible:false,
                    question:{},
                    modifyForm:{},
                    delForm:{},
                    addDishForm:{},
                    page:{
                        current:1,
                        total:0,
                        pageSize:10
                    },
                    // options:[],
                    dishType:[],
                    sel:{
                        cotent:"",
                        correctMark:"",
                    }
                };
            },
            props:[
                'storeId'
            ],
            methods: {
                handleSizeChange(){

                },
                handleCurrentChange(current){
                    this.getDish(current);
                },
                delques(questions){
                    console.log(questions.id)
                    var id = questions.id;
                    this.$axios.delete("http://localhost:8082/deleteDish?dishId="+id)
                    .then(response=>{
                        if(response.data.code!='200'){
                            this.$message.error("删除失败："+response.data.message);
                            this.delDialogVisible=false;
                        }
                        if(response.data.code=='200'){
                            // this.$message.success("删除成功");
                             this.$message({
                                message: '删除成功',
                                type: 'success'
                                });
                                this.getDish(null);
                        }
                    })
                    .catch(error=>{ //通信异常
                        console.error(error);
                        this.delDialogVisible=false;
                    })
                },
                // ================修改菜品请求============
                handleModify(){
                    this.modifyForm.storeId=localStorage.getItem("storeId"),
                    this.$axios.put("http://localhost:8082/updateDish",this.modifyForm
                    // {
                    //     params:{
                    //         id :this.modifyForm.id,
                    //         dishTypeId:this.modifyForm.dishTypeId,
                    //         dishName:this.modifyForm.dishName,
                    //         status:this.modifyForm.status,
                    //         dishPrice:this.modifyForm.dishPrice,
                    //         unit:this.modifyForm.unit,
                    //         dishImg:this.modifyForm.dishImg,
                    //         dishDescribe:this.modifyForm.dishDescribe,
                    //         quantity:this.modifyForm.quantity,
                    //         stock:this.modifyForm.stock,
                    //         storeId:this.modifyForm.storeId
                    //     }
                    // }
                    )
                    .then(response=>{
                        if(response.data.code!='200'){
                            this.$message.error("修改失败："+response.data.message);
                            this.detailDialogVisible=false;
                        }
                        if(response.data.code=='200'){
                           
                             this.$message({
                                message: '修改成功',
                                type: 'success'
                                });
                            this.detailDialogVisible=false;
                        }
                    })
                    .catch(error=>{ //通信异常
                        console.error(error);
                        this.detailDialogVisible=false;
                    })

                    console.log(this.modifyForm);
                    this.detailDialogVisible=false;
                },
                handleClick(row){
                    
                    this.modifyForm=row;
                    this.detailDialogVisible=true;
                },
                // dele(row){
                    
                //     this.delForm=row;
                //     this.delDialogVisible=true;
                // },
                handleSelect(key, keyPath) {
                    console.log(key, keyPath);
                },
                // enter(){
                //     this.options.push(this.sel);
                //     this.sel={};
                // },

                handleAdd(){
                    // this.addForm.options=this.options
                    var storeId = localStorage.getItem("storeId");
                    this.addDishForm.storeId = storeId;
                    this.$axios.post("http://localhost:8082/addDishs",this.addDishForm)
                    .then(response=>{//业务异常
                        if(response.data.code!='200'){
                            this.$message.error("添加失败："+response.data.message);
                            this.addDialogVisible=false;
                        }
                        if(response.data.code=='200'){
                            this.$message.success("添加成功");
                            // this.$message({
                            //     message: '添加成功',
                            //     type: 'success'
                            //     });
                            this.addDialogVisible=false;
                            this.getDish(null);
                        }
                        
                    })
                    .catch(error=>{ //通信异常
                        console.error(error);
                        this.addDialogVisible=false;
                    })
                },
                getDish(current){
                    console.log(this.queryForm);
                    //设置默认值
                    current = current?current:1;
                    //(1) get请求传参的格式与post请求很不同
                    this.$axios.get("http://localhost:8082/getDishByStoreAndName",
                    {
                        params: {
                            dishName:this.queryForm.dishName,
                            storeId:localStorage.getItem("storeId"),
                            current:current
                            
                        }
                    }
                    ).then(
                        response=>{
                            
                            let result = response.data;
                            if(result.code!='200'){
                                this.$message(result.message);
                                this.questions="";
                            }else{
                                let pageResult = result.data;
                                for(var i =0;i<pageResult.records.length;i++){
                                    if(pageResult.records[i].status=='TAKE_DOWN'){
                                        pageResult.records[i].status='下架';
                                    }
                                    if(pageResult.records[i].status=='USE'){
                                        pageResult.records[i].status='上架';
                                    }
                                    if(pageResult.records[i].status=='SOLD_OUT'){
                                        pageResult.records[i].status='售罄';
                                    }

                                }
                                this.questions= pageResult.records;
                                this.page.total=pageResult.total;
                                this.page.current=pageResult.current;
                                this.page.size=pageResult.size; 
                            }
                        }
                    ).catch(error=>{
                        console.error(error);
                        this.$message.error('哦豁，系统出了点那啥');
                    });

                },
                selDishTypeByUserId(){
                  this.$axios.get("http://localhost:8082/selDishTypeByUserId",
                  {
                      params: {
                          userId:1
                      }
                  }
                  ).then(
                      response=>{
                          
                          let result = response.data;
                          if(result.code!='200'){
                            this.$message(result.message);
                          }else{
                            this.selDishTypeByUserId="";
                            this.dishType=result.data; 
                             console.log(this.dishType);    
                            // console.log(1);        
                          }
                      }
                  ).catch(error=>{
                      console.error(error);
                      this.$message.error('哦豁，系统出了点那啥');
                  });

                }
            
            },
            mounted(){
                console.log(localStorage.getItem("storeId"))
                this.selDishTypeByUserId(null);
            },
        });
</script>
